<template>
  <div class="about">
    <div>当前数量：{{$store.state.count}}</div>
    <div>当前数量：{{count}}</div>
    <div>{{msg}}</div>
    <div>{{$store.getters.newMsg}}</div>
    <div>{{msg1}}</div>
    <div>{{newMsg}}</div>
    <!-- <div>当前数量：{{num}}</div> -->
    <ul>
      <li v-for='item in $store.state.list' :key='item.id'>{{item.title}}</li>
    </ul>
    <div>
      <button @click='handleClick("coniqiwa")'>点击</button>
      <button @click='handleQuery'>触发</button>
    </div>
  </div>
</template>
<script>
// mapState可以简化计算属性的写法
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  name: 'About',
  data () {
    return {
      step: 10
    }
  },
  computed: {
    // ...mapState({
    //   // count (state) {
    //   //   return state.count
    //   // }
    //   // count: state => state.count
    //   count: 'count'
    // })
    ...mapGetters({
      msg1: 'newMsg'
    }),
    ...mapGetters(['newMsg']),
    ...mapState(['count', 'msg'])
    // count () {
    //   return this.$store.state.count
    // }
  },
  methods: {
    // 也可以是数组
    // ...mapMutations(['updateMsg']),
    // 可以是对象
    ...mapMutations({
      handleClick: 'updateMsg'
    }),
    // ...mapActions({
    //   queryData: 'queryData'
    // }),
    ...mapActions(['queryData']),
    handleQuery () {
      // 触发action获取接口数据
      // this.$store.dispatch('queryData')
      this.queryData()
    }
    // handleClick () {
    //   // this.$store.state.count += 1
    //   // 点击按钮修改数量：必须通过mutation修改
    //   this.$store.commit('updateCount', 2)
    //   // this.$store.commit('updateMsg', 'nihao')

    //   this.updateMsg1('hi')
    // }
  }
}
</script>
